import React from 'react'
import ContentTop from '../../../components/ContentTop'
import { Button, Form, Input, Select, Space, message } from 'antd';
import { addAccount } from "../../../api/account";


export default function AccountAdd() {

    const { Option } = Select;
    const [form] = Form.useForm();
    const layout = {
        labelCol: {
            span: 2,
        },
    };
    const tailLayout = {
        wrapperCol: {
            offset: 2,
        },
    };

    const onFinish = async (values) => {
        let res = await addAccount(values);
        if (res.data.code == 0) {
            message.success(res.data.msg);
            form.resetFields();
        }else{
            message.error(res.data.msg)
        }
    };

    const onReset = () => {
        form.resetFields();
    };
    return (
        <>
            <div className="app-content">
                <ContentTop>
                    <div className="title">
                        添加账号
                    </div>
                </ContentTop>

                <div className="content-info">
                    <Form
                        {...layout}
                        form={form}
                        name="control-hooks"
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="account"
                            label="账号"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入账号',
                                },
                            ]}
                        >
                            <Input placeholder='请输入账号' style={{
                                width: 300,
                                height: 40,
                            }} />

                        </Form.Item>
                        <Form.Item
                            name="password"
                            label="密码"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入密码',
                                },
                            ]}
                        >
                            <Input.Password placeholder='请输入密码' style={{
                                width: 300,
                                height: 40,
                            }} />

                        </Form.Item>
                        <Form.Item
                            name="userGroup"
                            label="用户组"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择用户组',
                                },
                            ]}
                        >
                            <Select
                                placeholder="请选择用户组"
                                allowClear
                                style={{
                                    width: 300,
                                    height: 40,
                                }}
                            >
                                <Option value="超级管理员">超级管理员</Option>
                                <Option value="普通管理员">普通管理员</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item {...tailLayout}>
                            <Space>
                                <Button type="primary" htmlType="submit" style={{ width: 100, height: 40 }}>
                                    立即添加
                                </Button>
                                <Button htmlType="button" onClick={onReset} style={{ width: 70, height: 40 }}>
                                    重置
                                </Button>
                            </Space>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </>
    )
}
